<template>
  <div id="homeplaybar">
    
    <div class="left-player-info play-merge">
      
      <div class="playsongimg">
        <img
          
          v-if="$store.state.playbar.songinfopalyer == null"
          src="http://s4.music.126.net/style/web2/img/default/default_album.jpg"
          alt=""
        />
        <img
          v-else

          :src="$store.state.playbar.songinfopalyer.songs[0].al.picUrl"
          alt=""
        />
      </div>

      <div class="songtor">
        <div class="songtorname">
          
          <span v-if="$store.state.playbar.songinfopalyer == null">&nbsp;</span>
          <span v-else>{{ $store.state.playbar.songinfopalyer.songs[0].name }}</span>
        </div>
        <div class="songtorbtn">

          <!-- <span v-if="$store.state.userlikemusicid.includes($store.state.songinfopalyer.songs[0].id)" style="font-size:1.4rem;color:red" class="el-icon-star-on" ></span>
          <span v-else class="el-icon-star-off" ></span> -->
          
          <span class="el-icon-chat-dot-square"></span>
        </div>
      </div>
    </div>

    <div class="centre-player-button play-merge">
      <div>
        <span class="el-icon-caret-left cursor_pointer" @click="lastmusic()"></span>
        <span :class="$store.state.playbar.playericon" class="cursor_pointer" @click="isPlay()">  <!-- @click="playaudio()" -->
          <audio
            controls
            v-show="ok"
            id="myAudio"
            :src="$store.state.playbar.musicurl"
            ref="Ref_audioPlayer"
            @loadedmetadata="getduration()"
            @timeupdate="getcurrentTime()"
            @pause="music_pause()"
            @play="music_play()"
            @ended="music_ended()"
          >
            <source type="audio/mpeg" />
          </audio>
        </span>
        <span class="el-icon-caret-right cursor_pointer" @click="nextmusic()"></span>
      </div>

      <input class="range" ref="Ref_ragne" @click="setCurrentTime()" type="range" name="points" min="0" :max="rangeMAX" :value="rangeval" />

    </div>

    <div class="right-player-modify play-merge">
      <span class="musictime" v-if="duration">{{ currentTime }} / {{ duration }}</span>
      <span class="listening"><i style="font-size:1.3rem" class="el-icon-s-unfold"></i></span>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomePlayBar",
  data() {
    return {
      value1: 0,
      //音乐时长
      duration: "0:00",
      //音乐当前时长
      currentTime: "0:00",
      //音乐进度条当前时长---秒数int整数类型
      rangeval:0,
      //进度条时长-----秒数int整数类型
      rangeMAX:0,
      audio: null,
      scr: "123",
    };
  },
  methods: {
    //音乐播放
    isPlay() {
      switch (this.$refs.Ref_audioPlayer.paused) {
        case true:
          this.$refs.Ref_audioPlayer.play();
          break;
        case false:
          this.$refs.Ref_audioPlayer.pause();
          break;
        default:
          //console.log("播放失败");
          break;
      }
    },
    //音乐暂停时触发
    music_pause() {
      //改成暂停图标
      this.$store.commit("PLAYERICONSET", false);
    },
    //开始播放时触发
    music_play() {
      this.$store.commit("PLAYERICONSET", true);
    },
    //播放结束时触发。
    music_ended() {
      this.currentTime = "0:00";
      this.rangeval = 0;

      //播放结束触发，索引+1进行播放，播放音乐数组列表
      this.$store.dispatch("getsong", this.$store.state.playbar.musiclistall[this.$store.getters.musicindexof+1]).then(() => {
        this.$refs.Ref_audioPlayer.play();
      })
    },
    lastmusic() {
      console.log("上一首");
      this.$store.dispatch("getsong", this.$store.state.playbar.musiclistall[this.$store.getters.musicindexof-1]).then(() => {
        this.$refs.Ref_audioPlayer.play();
      })
    },
    nextmusic() {
      console.log("下一首");
      this.$store.dispatch("getsong", this.$store.state.playbar.musiclistall[this.$store.getters.musicindexof+1]).then(() => {
        this.$refs.Ref_audioPlayer.play();
        console.log(this.$store.state.playbar.musicurl);
      })
    },
    //获取audio
    getaudioid() {
      this.audio = document.getElementById("myAudio");
    },
    //获取音乐时间
    getduration() {
      //console.log("13213");
      this.rangeMAX = Math.trunc(this.$refs.Ref_audioPlayer.duration);
      let a = Math.trunc(this.$refs.Ref_audioPlayer.duration / 60);
      let b = Math.trunc(this.$refs.Ref_audioPlayer.duration % 60);
      if (b < 10) {
        b = "0" + b;
      }
      this.duration = a + ":" + b;
      //console.log(this.$refs.Ref_audioPlayer.url);
    },
    //获取当前音乐时长
    getcurrentTime() {
      //bug解决：当this.$refs.Ref_audioPlayer.currentTime 小于 1 时候 会触发音频失效问题
      if (this.$refs.Ref_audioPlayer.currentTime > 1) {
        this.rangeval = Math.trunc(this.$refs.Ref_audioPlayer.currentTime);
        let a = Math.trunc(this.$refs.Ref_audioPlayer.currentTime / 60);
        let b = Math.trunc(this.$refs.Ref_audioPlayer.currentTime % 60);
        if (b < 10) {
          b = "0" + b;
        }
        this.currentTime = a + ":" + b;
      }
    },
    //设置音乐时长
    setCurrentTime() {
      this.$refs.Ref_audioPlayer.currentTime = this.$refs.Ref_ragne.value
    }
  },
};
</script>

<style>
#homeplaybar {
  width: 65vw;
  height: 7vh;
  border-top: 1px solid rgb(218, 218, 218);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.play-merge {
  width: 20vw;
  height: 6vh;
}

.left-player-info {
  display: flex;
  align-items:center;
  margin: 0 0 0 1rem;
}
.playsongimg img {
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
}
.songtor {
  width: 15vw;
  margin: 0 10px;
}
.songtorname {
  margin-bottom: 0.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.songtorbtn {
  font-size: 1.2rem;
}
.songtorbtn span {
  margin-right: 0.5rem;
}
.centre-player-button {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 2rem;
}
.right-player-modify {
  display: flex;
  align-items: center;
  justify-content:flex-end;
  margin: 0 3rem 0 0;
}
.range {
  width: 100%;
  height: 5px;
}
.listening {
  margin: 0 0 0 1rem;
}
.cursor_pointer {
  cursor:pointer;
}
</style>